<template>
  <div class="about">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="hsi-pro">
          <h2 class="el-icon-s-home">关于我们</h2>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="24">
      <el-col :span="16">
        <div class="box4  bg-purple">
          <img src="../assets/jihao.jpg" alt="">
          <h1>董事长:李家豪</h1>
          <p>个人介绍:毕业于广州黑马大学,曾荣获"黑马第一人"的荣誉称号</p>
          <p>名言:卷就完事</p>
        </div>
      </el-col>
    </el-row> -->
    <el-row :gutter="24">
      <el-col :span="16">
        <ul class="box">
          <div class="box4 bg-purple">
            <img src="../assets/jihao.jpg" alt="" />
            <div class="box5">
              <h1>董事长:李家豪</h1>
              <p>个人介绍:毕业于广州黑马大学,曾荣获"黑马第一人"的荣誉称号</p>
              <p>名言:卷就完事</p>
            </div>
          </div>
          <div class="box4 bg-purple">
            <img src="../assets/common/1.jpg" alt="" />
            <div class="box5">
              <h1>招商·湾区1872</h1>
              <p>
                2022年6月28日讯：招商·湾区1872将推出建面79-105㎡户型，售楼处及样板间预计在7月初开放，详情可咨询售楼处了解。项目由广州招盛房地产有限责任公司进行开发，品牌属于招商蛇口。
              </p>
            </div>
          </div>
          <div class="box4 bg-purple">
            <img src="../assets/common/10.jpg" alt="" />
            <div class="box5">
              <h1>中建·凤榕台</h1>
              <p>
                2022年6月27日讯：中建·凤榕台售楼处已开放，将推建面68-89㎡户型，目前待售中。楼盘位于广州市增城区广汕公路富士康小镇东，距离广州地铁21号快线凤岗站约500米。项目以高层、超高层住宅为主，详情可致电售楼处。
              </p>
            </div>
          </div>
          <li v-for="item in data" :key="item.id" class="box1">
            <div class="box">
              <div class="box4 bg-purple">
                <div class="box5">
                  <h3>{{ item.title }}</h3>
                  <p v-html="item.content"></p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>


<script >
import { getPagesList } from "@/api/property";
export default {
  data() {
    return {
      data: [{}],
    };
  },
  async created() {
    const res = await getPagesList({ _limit: 1000, _start: 0 });
    this.data = res.data;
    console.log(res);
  },
};
</script>
<style lang="scss" scoped>
.bg-purple {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.box4 {
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 1200px;
  height: 225px;
  margin: 20px;
  padding: 15px;
  p {
    text-indent: 2em;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  li {
    overflow: hidden;
  }
}

.el-row {
  display: flex;
  justify-content: center;
  &:last-child {
    margin-bottom: 0;
  }
  // z-index: 10000;
}
img {
  width: 300px;
  height: 200px;
  margin-right: 50px;
}
</style>